<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .relative-position{ position: relative }
        .fix-bottom { position: fixed; left: 0; bottom: 0 }
        .w100 { width: 100% }
        .h100 { height: 100vh }
        .h-50 { height: 50px }
        .pb60 { padding-bottom: 60px }
        .pa7 { padding: 7px }
        .top-border { border-top: 1px solid #ccc }
        .btn {
            outline: 0;
            border: 0;
            vertical-align: middle;
            cursor: pointer;
            -webkit-appearance: button;
            padding: 4px 16px;
            font-size: 14px;
            text-decoration: none;
            color: inherit;
            background: transparent;
            transition: .3s cubic-bezier(.25,.8,.5,1);
            min-height: 2.572em;
            box-shadow: 0 1px 5px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12);
            font-weight: 500;
            text-transform: uppercase;
            overflow: visible;
        }
        .bg-primary { background: #027be3!important }
        .bg-white { background: #fff }
        .bg-secondary { background: #26a69a!important }
        .text-wihte { color: white }
        .display-none { display: none }
    </style>
</head>
<body>
    <div class="relative-position h100 pb50">
        <div class="">
            内容
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi laboriosam pariatur ad. Quaerat mollitia dignissimos laboriosam perferendis doloribus voluptates, doloremque aperiam quisquam veniam officiis molestiae quis, hic, nam natus ducimus.
        </div>
        <div id="btnGroup" class="w100 fix-bottom h-60 top-border pa7 bg-white">
            <button class="btn bg-primary text-wihte" onclick="displayNone()">提交</button>
            <button class="btn bg-secondary text-wihte" onclick="displayNone()">驳回</button>
        </div>
    </div>
    <script>
        function displayNone() {
            var btnGroup = document.getElementById('btnGroup')
            btnGroup.className = 'display-none'
        }
    </script>
</body>
</html>